<template>
  <card-layout title="生态修复区域监控" class="chart" bg="2">
    <template #extra>
      <el-icon class="extra-more" :size="22">
        <Menu />
      </el-icon>
    </template>
    <div class="content" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.15)">
      <el-row :gutter="5">
        <el-col :span="12" v-for="(item, index) in videoList" :key="index">
          <div class="video-div">
            <video :id="item.id" :src="item.videoUrl" style="width: 100%;height: 90px;" muted controls="true"></video>
            <div>{{ item.deviceName }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </card-layout>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { getkeyAreasVideo } from "@/api/situation";
import flvjs from "flv.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits(['mineMonitorShow']);
const videoList = ref([
  { videoName: '宝宏1号', videoUrl: 'http://218.23.184.226:8050/live/34020000001110000004_34020000001320000001.flv?sid=0', id: 'sj1' },
  { videoName: '宝宏2号', videoUrl: 'http://218.23.184.226:8050/live/34020000001110000004_34020000001320000003.flv?sid=0', id: 'sj2' },
  { videoName: '龙跃1号', videoUrl: 'http://111.38.126.130:8050/live/34020000001110000004_34020000001320000001.flv?sid=0', id: 'sj3' },
  { videoName: '龙跃2号', videoUrl: 'http://111.38.126.130:8050/live/34020000001110000004_34020000001320000010.flv?sid=0', id: 'sj4' },
])
// 存储flv播放器实例的对象
const flvPlayers = {};
onMounted(() => {
  getkeyAreasVideo().then(res => {
    if (res.code == 200) {
      videoList.value = res.data
      nextTick(() => {
        videoList.value.forEach(item => {
          initVideoPlayer(item.id, item.videoUrl);
        })
      });
    }
  })
});

function detailsShow() {
  emit('mineMonitorShow')
}

// 初始化视频播放器
function initVideoPlayer(videoId, videoUrl) {
  const videoElement = document.getElementById(videoId);
  if (!videoElement) {
    console.error(`未找到ID为${videoId}的视频元素`);
    return;
  }

  if (flvjs.isSupported()) {
    // 如果已存在播放器实例，先销毁
    if (flvPlayers[videoId]) {
      flvPlayers[videoId].destroy();
    }

    // 创建flv播放器
    const flvPlayer = flvjs.createPlayer({
      type: "flv",
      url: videoUrl,
      isLive: true,
      hasAudio: false,
      hasVideo: true,
      cors: true,
    });

    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();

    console.log("FLV播放器已加载，尝试播放...");

    // 添加更多事件监听以便调试
    flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
      console.log(`${videoId} 加载完成`);
    });

    flvPlayer.on(flvjs.Events.MEDIA_INFO, (mediaInfo) => {
    });

    // 存储播放器实例
    flvPlayers[videoId] = flvPlayer;

    // 添加事件监听
    videoElement.addEventListener("play", () => {
    });

    videoElement.addEventListener("pause", () => {
      console.log(`${videoId} 暂停播放`);
    });

    videoElement.addEventListener("error", (e) => {
      console.error(`${videoId} 视频元素错误:`, e);
    });
  } else {
    console.error("您的浏览器不支持FLV.js");
  }
};

// 组件卸载时清理资源
onUnmounted(() => {
  console.log("组件卸载，清理资源...");
  // 销毁所有播放器实例
  Object.values(flvPlayers).forEach((player) => {
    if (player) {
      player.pause();
      player.unload();
      player.detachMediaElement();
      player.destroy();
    }
  });
});
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  height: 300px;

  .more-div {
    color: #bbcfff;
    cursor: pointer;
  }

  .more-div:active {
    scale: 0.8;
  }

  .content {
    .video-div {
      width: 100%;
      background-color: black;
      margin-top: 5px;

      >div {
        color: #eef1fa;
        text-align: center;
      }
    }

    margin: 0px 8px 5px 8px
  }
}
</style>
